<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>订单详情</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>

      <div v-if="orderInfo" class="order-detail">
        <div class="detail-section">
          <h3>订单信息</h3>
          <div class="info-item">
            <span class="label">订单编号：</span>
            <span>{{ orderInfo.orderNo }}</span>
          </div>
          <div class="info-item">
            <span class="label">订单状态：</span>
            <el-tag :type="getOrderStatusType(orderInfo.status)">
              {{ getOrderStatusLabel(orderInfo.status) }}
            </el-tag>
          </div>
          <div class="info-item">
            <span class="label">下单时间：</span>
            <span>{{ orderInfo.createTime }}</span>
          </div>
          <div class="info-item" v-if="orderInfo.payTime">
            <span class="label">支付时间：</span>
            <span>{{ orderInfo.payTime }}</span>
          </div>
          <div class="info-item" v-if="orderInfo.deliveryTime">
            <span class="label">发货时间：</span>
            <span>{{ orderInfo.deliveryTime }}</span>
          </div>
          <div class="info-item" v-if="orderInfo.completeTime">
            <span class="label">完成时间：</span>
            <span>{{ orderInfo.completeTime }}</span>
          </div>
        </div>

        <div class="detail-section">
          <h3>收货信息</h3>
          <div class="info-item">
            <span class="label">收货人：</span>
            <span>{{ orderInfo.receiverName }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系电话：</span>
            <span>{{ orderInfo.receiverPhone }}</span>
          </div>
          <div class="info-item">
            <span class="label">收货地址：</span>
            <span>{{ orderInfo.receiverAddress }}</span>
          </div>
        </div>

        <div class="detail-section">
          <h3>商品信息</h3>
          <el-table :data="orderInfo.items" style="width: 100%">
            <el-table-column label="商品图片" width="120">
              <template #default="scope">
                <el-image 
                  style="width: 80px; height: 80px"
                  :src="scope.row.productImage"
                  fit="cover"
                />
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" />
            <el-table-column prop="price" label="单价" width="120">
              <template #default="scope">
                ¥{{ scope.row.price }}
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="120" />
            <el-table-column label="小计" width="120">
              <template #default="scope">
                ¥{{ scope.row.subtotal }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="detail-section">
          <h3>订单备注</h3>
          <div class="remark">
            {{ orderInfo.remark || '无' }}
          </div>
        </div>

        <div class="order-footer">
          <div class="price-info">
            <span>订单总额：<span class="price">¥{{ orderInfo.totalAmount }}</span></span>
          </div>
          <div class="actions">
            <el-button 
              v-if="orderInfo.status === '0'"
              type="primary"
              @click="handlePay"
            >
              立即支付
            </el-button>
            <el-button
              v-if="orderInfo.status === '0'"
              @click="handleCancel"
            >
              取消订单
            </el-button>
            <el-button
              v-if="orderInfo.status === '2'"
              type="success"
              @click="handleConfirmReceive"
            >
              确认收货
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getOrder, cancelOrder, confirmReceive } from '@/api/mall/order'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const orderInfo = ref(null)

// 订单状态选项
const orderStatusOptions = [
  { value: '0', label: '待付款' },
  { value: '1', label: '待发货' },
  { value: '2', label: '待收货' },
  { value: '3', label: '已完成' },
  { value: '4', label: '已取消' }
]

// 获取订单状态标签
const getOrderStatusLabel = (status) => {
  const option = orderStatusOptions.find(item => item.value === status)
  return option ? option.label : ''
}

// 获取订单状态标签类型
const getOrderStatusType = (status) => {
  switch (status) {
    case '0': return 'warning'
    case '1': return 'primary'
    case '2': return 'success'
    case '3': return 'info'
    case '4': return 'danger'
    default: return 'info'
  }
}

// 获取订单详情
const getOrderDetail = async () => {
  loading.value = true
  try {
    const response = await getOrder(route.params.orderId)
    orderInfo.value = response.data
  } catch (error) {
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败')
  } finally {
    loading.value = false
  }
}

// 返回列表页
const goBack = () => {
  router.back()
}

// 支付订单
const handlePay = () => {
  router.push(`/mall/order/pay/${orderInfo.value.orderId}`)
}

// 取消订单
const handleCancel = () => {
  ElMessageBox.confirm(
    '确认取消该订单?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await cancelOrder(orderInfo.value.orderId)
    ElMessage.success('订单已取消')
    getOrderDetail()
  }).catch(() => {})
}

// 确认收货
const handleConfirmReceive = () => {
  ElMessageBox.confirm(
    '确认已收到商品?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await confirmReceive(orderInfo.value.orderId)
    ElMessage.success('确认收货成功')
    getOrderDetail()
  }).catch(() => {})
}

onMounted(() => {
  getOrderDetail()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h3 {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.info-item {
  margin-bottom: 15px;
  line-height: 20px;
}

.info-item .label {
  color: #666;
  margin-right: 10px;
}

.remark {
  color: #666;
  line-height: 1.5;
}

.order-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.price-info {
  margin-right: 20px;
}

.price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 10px;
}
</style> 